<template>
  <div class="header">
    <Header1></Header1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品展示</el-breadcrumb-item>
      <el-breadcrumb-item>{{ detailContent.name }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="tops">
      <p>{{ detailContent.name }}</p>
      <p>
        <img :src="IP + zp" alt="" />
      </p>
      <div class="a" style="box-sizing: border-box; padding: 0 50px">
        <p v-html="detailContent.content" class="p1">
          {{ detailContent.content }}
        </p>
      </div>
    </div>

      <div class="foot">
      <div>
        <p>© 2021 GiiBee</p>
        <p>郑州市高新区高新万科广场</p>
      </div>
    </div>
  </div>
</template>

<script>
import { prid } from "../api/about";
// import Header from "../components/header.vue";
import Header1 from "../components/header.vue";
export default {
  data() {
    return {
      list: [],
      id: "",
      img: "",
      zp: "",
      detailContent: [],
      IP: "http://websong.wang:3000/",
    };
  },
  mounted() {
    //接收从列表传递过来的id在拼接给请求的地址中
    var id = this.$route.query.id;
    this.id = id;
    console.log(id);
    //详情页
    prid(id).then((res) => {
      console.log(res);
      //   this.list=res.data
      this.detailContent = res.data;
      console.log(this.detailContent);
      this.img = this.detailContent.pic.split("public/");
      console.log(this.img[1]);
      this.zp = this.img[1];
      this.list = res.data.data;
    });
  },
  methods: {},
  components: { Header1 },
};
</script>

<style lang="scss">
.foot {
  width: 100%;
  height: 80px;
  border: 1px solid #ccc;
  margin-top: 20px;
  div {
    text-align: center;
    p {
      margin-top: 10px;
    }
  }
}
.el-breadcrumb {
 font-size: 19px;
    line-height: 3;
    width: 90%;
    margin-left: 47px;
    margin-top: 30px;
    background-color: #ccc;
    padding-left: 30px;
    margin: auto;
    margin-top: 20px;
}
.tops {
  width: 90%;
  background: #eee;
  margin: auto;
  margin-top: 20px;
  text-align: center;
  margin-top: 20px;
  padding: 20px 20px;
  p {
    font-size: 30px;
    margin-top: 20px;
    img {
      width: 80%;
      height: 100%;
    }
  }
  .p1 {
    font-size: 20px;
  }
}
</style>
